@tailwind base;

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    scrollbar-gutter: stable;
    @apply scroll-smooth;
  }

  html,
  body,
  #__next,
  #__root {
    @apply h-full;
  }

  #__root {
    @apply flex flex-col font-sans;
  }

  main {
    @apply flex-1;
  }

  body {
    @apply bg-white text-slate-900;
    @apply dark:bg-slate-900 dark:text-slate-200 dark:[color-scheme:dark];
  }

  :focus-visible {
    @apply ring-accent-400 relative rounded-xl outline-none ring-2;
  }

  ::selection {
    @apply bg-accent-200/60 text-accent-900;
    @apply dark:bg-accent-400/30 dark:text-accent-100;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}
